<template>
	<view class="team">
		<navbar title="个人参赛" bgcolor="#6252DF" txcolor="#ffffff"></navbar>
		
		<view>
			<image class="info-top" src="https://yuchengpic.oss-cn-hangzhou.aliyuncs.com/img/info-top.png" mode="aspectFit"></image>
		</view>
		<view class=" bgwhite mt20">
			<view class="bold fs32 p30">选手填写报名信息</view>
			<view class="acea-row row-middle px30 ">
				<view class="fc222 fs32 name">姓名：</view>
				<view>
					<input class="input" v-model="real_name" type="text" placeholder="请输入姓名" placeholder-class="fc9e fs26"/>
				</view>
			</view>
			<view class="acea-row row-middle mt30 px30 ">
				<view class="fc222 fs32 name">手机号：</view>
				<view>
					<input class="input" v-model="phone" type="number" placeholder="请输入手机号" placeholder-class="fc9e fs26"/>
				</view>
			</view>
			<view class="acea-row row-middle mt30 px30 ">
				<view class="fc222 fs32 name">身份证号：</view>
				<view>
					<input class="input" v-model="id_card" type="text" placeholder="请输入身份证号" placeholder-class="fc9e fs26"/>
				</view>
			</view>
			<view class="px30 pb30" v-if="show==1">
				<view class="acea-row row-middle mt30">
					<view class="fc222 fs32 name">年龄分组：</view>
					<view class="acea-row row-between-wrapper select" @click="ageopen">
						<view class="fc333 fs26" v-if="agename">{{ agename }}</view>
						<view class="fc9e fs26" v-else>请选择你的年龄</view>
						<view class="iconfont icon-xiangxia2"></view>
					</view>
				</view>
				<view class="acea-row row-middle mt30">
					<view class="fc222 fs32 name">专业分组：</view>
					<view class="acea-row row-between-wrapper select" @click="zhuanyeopen">
						<view class="fc333 fs26" v-if="zhuanyename">{{ zhuanyename }}</view>
						<view class="fc9e fs26" v-else>请选择你的专业</view>
						<view class="iconfont icon-xiangxia2"></view>
					</view>
				</view>
			</view>
			<view class="px30 pb30">
				<view class="acea-row row-middle mt30">
					<view class="fc222 fs32 name">报名渠道</view>
					<view>
						<input class="input" v-model="source" type="text" placeholder="请输入报名渠道" placeholder-class="fc9e fs26"/>
					</view>
				</view>
			</view>
			<view class="p30" v-if="show==0">
				<view class="verify acea-row row-middle row-center" @click="verify">点击进行年龄校验</view>
			</view>
		</view>
		
		<view class="price fcenter">你需支付：{{ one_price }}元</view>
		
		<view class="paybtn" @click="confirmbtn">点击支付</view>
		<view style="width: 100%;height: 100rpx;"></view>
		
		<uni-popup type="bottom" ref="ages">
			<view class="age-nav p30">
				<view class="acea-row row-between-wrapper">
					<view class="fs36 fc333">选择年龄分组</view>
					<view class="iconfont icon-iconcancel0101 fs40 fc333" @click="ageclose"></view>
				</view>
				<view class="bor-bot mt30 mb30"></view>
				<block v-for="(item,index) in ageData" :key="index">
					<view class="acea-row row-middle row-center mb30" @click="ageclick(item)">
						{{ item.zuName }}
					</view>
				</block>
			</view>
		</uni-popup>
		
		<uni-popup type="bottom" ref="zhuanye">
			<view class="age-nav p30">
				<view class="acea-row row-between-wrapper">
					<view class="fs36 fc333">选择专业分组</view>
					<view class="iconfont icon-iconcancel0101 fs40 fc333" @click="zhuanyeclose"></view>
				</view>
				<view class="bor-bot mt30 mb30"></view>
				<scroll-view scroll-y="true" class="scroll-nav">
					<block v-for="(item,index) in zhuanyeData" :key="index">
						<view class="mb30 item fcenter" @click="zhuanyeclick(item)">
							{{ item.zhuanyeName }}
						</view>
					</block>
				</scroll-view>
			</view>
		</uni-popup>
		
	</view>
</template>

<script>
	import{
		inletConfig,
		baomingCreate
	} from '@/api/api.js'
	import navbar from '../../components/navbar.vue';
	export default {
		components:{
			navbar
		},
		data() {
			return {
				ageData:[],
				agename:'',
				age_id:'',
				zhuanyeData:[],
				zhuanyename:'',
				zhuanye_id:'',
				huodong_id:'',
				real_name:'',
				phone:'',
				id_card:'',
				source:'',
				one_price:'',
				xiangmu_id:'',
				is_no_check:'',
				show: 0,
				
			};
		},
		onLoad(option){
			this.huodong_id = option.huodong_id;
			this.xiangmu_id = option.xiangmu_id;
			this.one_price = option.one_price;
			this.is_no_check = option.is_no_check;
			this.show = option.is_no_check;
			this.getconfig();
		},
		methods:{
			//身份证实名认证
			verifyIDcard(idNo,name){
				let that = this;
				let ocrParams = {
					idNo: idNo,
					name: name
				}
				setTimeout(()=>{
					uni.showLoading({
						title:'加载中',
						mask:true
					})
					uni.request({
						method: 'POST',
						url: 'https://idenauthen.market.alicloudapi.com/idenAuthentication',
						header: {
							'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8',
							'Authorization': 'APPCODE 190d9fcb115b490db2c01737f98283aa' //APPCODE值 （'APPCODE xxxxxxx'）类似于token的形式
						},
						dataType: 'json',
						data: ocrParams,
						success(res) {
							uni.hideLoading();
							console.log(222222, res.statusCode)
							if( res.statusCode == '403' ) {
								that.$util.Tips({ title: '身份检验繁忙请稍后重试' });
								return;
							} 
							if( res.data.respCode == '0002' ) {
								that.$util.Tips({ title: res.data.respMessage });
								return;
							} 
							if( res.data.respCode == '0004' ) {
								that.$util.Tips({ title: res.data.respMessage });
								return;
							} 
							if( res.data.respCode == '0008' ){
								that.$util.Tips({ title: res.data.respMessage });
								return;
							}  
							let age = res.data.age;
							let list = that.ageData;
							let str = list.filter((item)=>{
								if( age>=item.min_age && age<=item.max_age ){
									return item
								}
							})
							if( str.length==0 ) {
								uni.showModal({
									title: '提示',
									content: '已超过报名平均年龄',
									success: function (res) {
										if (res.confirm) {
											console.log('用户点击确定');
										} else if (res.cancel) {
											console.log('用户点击取消');
										}
									}
								});
								that.agename = '请选择年龄'
								return false;
							}
							that.agename = str[0].zuName;
							that.age_id = str[0].age_id;
							that.show = 1;
							if( res.data.respCode == '0000' ) return that.$util.Tips({ title: res.data.respMessage });
							if( res.data.respCode == '0004' ) return that.$util.Tips({ title: res.data.respMessage });
							if( res.data.respCode == '0008' ) return that.$util.Tips({ title: res.data.respMessage });
						},
						fail(err) {
							uni.hideLoading();
							console.log('步骤4');
							console.log('err',err);
						}
					})
				},1000)
				
			},
			verify(){
				let that = this;
				let list = that.infoData;
				if( !that.real_name ) return that.$util.Tips({ title: `请填写姓名` });
				if( !that.id_card ) return that.$util.Tips({ title: `请填写身份证号码` });
				if (!/^[1-9]\d{5}(19|20)\d{2}(0\d|1[0-2])([0-2]\d|3[0-1])\d{3}([0-9]|X)$/i.test(that.id_card)) return that.$util.Tips({
					title: that.$t(`请正确填写身份证号码`)
				});
				uni.showLoading({
					title:"校验中"
				})
				that.verifyIDcard(that.id_card,that.real_name)
			},
			confirmbtn(){
				let that = this;
				let arr = {
					real_name: that.real_name,
					phone: that.phone,
					id_card: that.id_card,
				}
				let infoData = [];
				infoData.push(arr)
				let data = {
					huodong_id: that.huodong_id,
					infoData:  JSON.stringify(infoData),
					zhuanye_id: that.zhuanye_id,
					age_id: that.age_id,
					title: that.real_name,
					source: that.source
				}
				if( !arr.real_name ) return that.$util.Tips({ title: '请填写姓名' })
				if( !arr.phone ) return that.$util.Tips({ title: '请填写电话' })
				if (!/^1(3|4|5|7|8|9|6)\d{9}$/i.test(arr.phone)) return that.$util.Tips({
					title: that.$t(`请输入正确的手机号码`)
				});
				if( !arr.id_card ) return that.$util.Tips({ title: '请填写身份证编号' })
				if( !data.age_id ) return that.$util.Tips({ title: '请选择年龄组' })
				if( !data.zhuanye_id ) return that.$util.Tips({ title: '请选择专业' })
				uni.showLoading({
					title:'支付中'
				})
				baomingCreate( data ).then(res=>{
					let { orderId,jsConfig } = res.data.result;
					uni.requestPayment({
						timeStamp: jsConfig.timestamp,
						nonceStr: jsConfig.nonceStr,
						package: jsConfig.package,
						signType: jsConfig.signType,
						paySign: jsConfig.paySign,
						success: function(res) {
							uni.hideLoading();
							that.$util.Tips({ title:'支付成功' },()=>{
								uni.navigateTo({
									url: '/pages/home/status'
								})
							})
						},
						fail: function() {
							uni.hideLoading();
							uni.showToast({
								title: that.$t(`取消支付`),
								icon: 'none'
							});
						},
						complete: function() {
							uni.hideLoading();
						}
					});
				}).catch(err=>{
					uni.hideLoading();
					that.$util.Tips({ title: err })
				})
			},
			zhuanyeclick(item){
				this.zhuanyename = item.zhuanyeName;
				this.zhuanye_id = item.zhuanye_id;
				this.zhuanyeclose();
			},
			zhuanyeopen(){
				this.$refs.zhuanye.open();
			},
			zhuanyeclose(){
				this.$refs.zhuanye.close();
			},
			ageclick(item){
				this.agename = item.zuName;
				this.age_id = item.age_id;
				this.ageclose();
			},
			ageopen(){
				this.$refs.ages.open();
			},
			ageclose(){
				this.$refs.ages.close();
			},
			getconfig(){
				let that = this;
				inletConfig({ xiangmu_id: that.xiangmu_id }).then(res=>{
					that.ageData = res.data.data.ageData;
					that.zhuanyeData = res.data.data.zhuanyeData;
				})
			},

		}
	}
</script>

<style lang="scss">
	.team{
		
		.verify{
			width: 690rpx;
			height: 96rpx;
			border-radius: 15rpx;
			background: #6252DF;
			color: #ffffff;
			font-size: 30rpx;
		}
		
		
		.scroll-nav{
			width: 100%;
			height: 500rpx;
			white-space: nowrap;
			
			.item{
				display: block;
			}
		}
		
		
		.age-nav{
			width: 100%;
			min-height: 500rpx;
			background-color: #ffffff;
		}
		
		.info-top{
			width: 100%;
			height: 364rpx;
		}
		
		.name{
			width: 160rpx;
		}
		
		.input{
			width: 508rpx;
			height: 80rpx;
			box-sizing: border-box;
			border: 2rpx solid #AFAFAF;
			border-radius: 12rpx;
			padding: 0 30rpx;
		}
		.uni-select{
			border: 2rpx solid #AFAFAF;
			width: 508rpx;
			height: 80rpx;
			padding: 0 30rpx;
		}
		.select{
			border: 2rpx solid #AFAFAF;
			width: 508rpx;
			height: 80rpx;
			padding: 0 30rpx;
		}
		
		.xuanshou{
			color: #DF3838;
			padding: 30rpx 0;
		}
		
		.price{
			color: #FF4040;
			font-size: 32rpx;
			font-weight: bold;
			margin-top: 50rpx;
		}
		.paybtn{
			background: #6252DF;
			width: 690rpx;
			height: 96rpx;
			line-height: 96rpx;
			text-align: center;
			font-size: 36rpx;
			font-weight: bold;
			border-radius: 48rpx;
			color: #ffffff;
			margin: 50rpx auto;
		}
		
	}
</style>
